<!DOCTYPE html><HTML><HEAD><meta name="renderer" content="webkit"><meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/><TITLE>健康辅助系统 数据查询</TITLE><META Name="keywords" Content="数据上传," />
  <META Name="description" Content="健康辅助系统,数据查询," />
  <META Name="format-detection" Content="telephone=no" />
  
  
  
  
  
  <META charset="UTF-8">
  <META content="IE=edge" http-equiv="X-UA-Compatible">
  <META name="renderer" content="webkit"><LINK rel="stylesheet" type="text/css" href="css/index.css"><script language="javascript" src="js/jquery-latest.min.js"></script><!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  
  <!--Announced by Visual SiteBuilder 9-->
  <link rel="stylesheet" type="text/css" href="css/_sitegray_d.css" />
  <script language="javascript" src="js/_sitegray.js"></script>
  <!-- CustomerNO:7765626265723230747f465453525742000000054156 -->
  <link rel="stylesheet" type="text/css" href="css/index.vsb.css" />
  <script type="text/javascript" src="js/vsbscreen.min.js" id="_vsbscreen" ></script>
  <script type="text/javascript" src="js/counter.js"></script>
  <script type="text/javascript">_jsq_(1001,'/index.jsp',-1,1391600553)</script>
  </HEAD>
  <BODY > <div style='width:0px;height:0px;overflow: hidden;'><img src=""  /></div>
  
  
  
  
  
  
  <style type="text/css">
  
  body{
              background-image:url(images/background02.jpg) ; 
          background-repeat:no-repeat;
          background-position:top;
          
  }
  .dft-content {
            display: flex; /* 使用flex布局 */
        }
  .dft-midcont, .dft-rightcont {
      display: flex;
      flex-direction: column; /* 子项目垂直排列 */
  }
  .blockwhite {
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
  }
  .cont {
            flex-grow: 1; /* 允许.cont填充剩余空间 */
        }
  .wrapper{
      width:100%; 
      background:url(images/logo.png) top center no-repeat; 
      min-height:800px; 
      background-size:100% 100%;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/background01.jpg',sizingMethod='scale');
  }
.title {
  font-size: 24px;
  color: #333;
}
.cont {
  margin-top: 20px;
}
.disease-list {
  height: 300px; /* 固定高度 */
  overflow-y: scroll; /* 显示垂直滚动条 */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.disease-list div {
  margin-bottom: 10px;
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 18px;
  transition: background-color 0.3s;
}
.disease-list div:hover {
  background-color: #f0f0f0;
}
.disease-details {
  display: none;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  margin-top: 10px;
  font-size: 16px;
}
.report-list {
  height: 300px;
  overflow-y: scroll;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
}
.report-list div {
  margin-bottom: 10px;
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 18px;
}
.pdf-viewer {
    width: 100%; /* 宽度设置为100% */
    height: 100%; /* 高度设置为100% */
    border: none;
}

.pdf-viewer iframe {
    width: 100%; /* 宽度设置为100% */
    height: 67vh; /* 高度设置为100% */
    border: none;
}
.dft-midcont {
            flex: 1; /* 左边部分占据1份空间 */
            max-width: 300px; /* 最大宽度 */
            min-height: 100vh; /* 最小高度为视窗高度 */
}
.dft-rightcont {
    flex: 4; /* 右边部分占据3份空间 */
    max-width: 900px; /* 最大宽度 */
    height: 600px; /* 固定高度 */
}
#healthReportContainer {
  margin-top: 10px;
}
  </style>
  <DIV class="mainCont"><!--header S-->
  <DIV class="dft-header">
  <DIV class="topbar clearfix">
  <DIV class="user-opr clearfix" style="height: 58px; float: right">
  
  <div style="clear:both;"></div>
  
  <script language="javascript" src="js/tsitesclick.js"></script>
   <div class="item lag"><a href=""></a></div>


<script> var _tsites_com_view_mode_type_=8;</script>
<div class="item"><a href=""  target=_blank title="华中科技大学" ></a></div>
</DIV>
  
  
  
  
  
  <script> var _tsites_com_view_mode_type_=8;</script>
  <div class="logo" style="float: left;">
      <img border="0" src="images/logo.png" title="健康平台logo" />
      <div style="color: white; margin-left: 10px; font-size: 36px; display: inline-block; vertical-align: top;">健康辅助检测平台</div>
  </div>
  </DIV><!--nav-->
  <DIV class="navBar clearfix">
  
  
              <ul class="navbox clearfix"  id="MenuBar1" style="width:1136px;overflow: hidden;height:52px">
   <li   ><h3><a href="function.html" >数据上传</a></h3>
                  </li>
  
   <li   class="fNiv"   ><h3><a href="quiry.html" style=" background: #4d90d2;">数据查询</a></h3></li>
  
   <li   class="fNiv"   ><h3><a href="discussion.html"  >讨论区</a></h3></li>
  </ul>
  
  
  
  
  
  
  </DIV></DIV><!--header E--><!--个人主页-->
  <DIV class="dft-main clearfix">
  <DIV class="dft-side"><!--教师个人-->
  <DIV class="blockwhite JS-display">
  <DIV class="js-top clearfix">
  
  <div class="photowrap">
                              <div class="img"><span><img id="u_u6_23212pic" border="0" /></span></div>
                          </div><script language="javascript" src="js/imagescale.js"></script>
  <script type="text/javascript"> 
   var path = localStorage.getItem("imagePath")
   var u_u6_pic = new ImageScale("u_u6_",140,140,true,true);u_u6_pic.addimg(path,"","张三","23212");
  </script>
  
  <DIV class="info"><h2>张三</h2><script> var _tsites_com_view_mode_type_=8;</script>
  <script language="javascript" src="js/tsitesencrypt.js"></script><div class="like"><i class="ico" src="images/background02.jpg" id="_parise_imgobj_u8"></i><span id="_parise_obj_u8"></span></div><script language="javascript" src="js/TsitesPraiseUtil.js"></script>
  <script> var _TsitesPraiseUtil_u8= new TsitesPraiseUtil();_TsitesPraiseUtil_u8.setParam({'nodeid':'_parise_obj_u8','iscanclickidobj':'iscanclick_parise_obj_u8','pdtype':'0','imageid':'_parise_imgobj_u8','apptype':'index','basenum':'0','uid':'23212','homepageid':144365,'limttype':'allpage','limithour':24,'contentid':0});</script>
  </DIV></DIV>  
  </DIV>




      <DIV class="blockwhite Psl-info">
          <DIV class="title clearfix">
              <I class="ico ico-1"></I>
              <DIV class="info">
                  <H2>个人信息</H2>
                  <P>Personal information</P>
              </DIV>
          </DIV>
          <DIV class="cont">
              <p id="account1">
                  用户名：<span id="accountValue1"></span>
              </p>
              <p id="account2">
                  uid：<span id="accountValue2"></span>
              </p>
              <p id="identity">
                  身份：用户
              </p>
          </DIV>
      </DIV>

      <script>
          var accountKey1 = 'username';
          var accountKey2 = 'userid';

          // 当文档加载完毕时执行
          document.addEventListener('DOMContentLoaded', function() {
              // 从 localStorage 获取账号信息
              var accountValue1 = localStorage.getItem(accountKey1);
              var accountValue2 = localStorage.getItem(accountKey2);

              // 将获取到的值显示在页面上
              document.getElementById('accountValue1').textContent = accountValue1;
              document.getElementById('accountValue2').textContent = accountValue2;
          });
      </script>
  </DIV><!--side-->





  <DIV class="dft-content clearfix">

      <div class="dft-midcont">
          <div class="blockwhite Psl-info">
            <div class="title clearfix">
              <i class="ico ico-4"></i>
              <div class="info"><h2>健康报告</h2><p>View health report</p></div>
            </div>
            <div class="cont">
              <div class="report-list" id="reportList">
                <!-- 健康报告日期列表 -->
              </div>
              <div id="healthReportContainer">
                <!-- 健康报告PDF显示区域 -->
              </div>
            </div>
          </div>
        </div>
        
        


    <div class="dft-rightcont">
    <div class="blockwhite Rsh-focus">
      <div class="title clearfix">
        <i class="ico ico-8"></i>
        <div class="info"><h2>疾病详情</h2><p>Disease Details</p></div>
      </div>
      <div class="pdf-viewer">
        <iframe id="pdfViewer" src="" frameborder="0"></iframe>
      </div>
    </div>
</div>

<script>
        // 从后端获取健康报告日期列表
      //   function fetchHealthReportDates() {
      //     var xhr = new XMLHttpRequest();
      //     xhr.open('POST', 'http://localhost:8080/data/select', true);
      //     xhr.setRequestHeader('Content-Type', 'application/json');
      //     xhr.onreadystatechange = function() {
      //       if (xhr.readyState === 4 && xhr.status === 200) {
      //         var response = JSON.parse(xhr.responseText);
      //         initReportList(response.health_reports);
      //       }
      //     };
      //     xhr.send(JSON.stringify({
      //       "id": 1,
      //       "username": "exampleUser",
      //       "userpic": "http://github.com/default.jpg"
      //     }));
      //   }
        var healthReports = [
            "2024-11-06T18:28:10+08:00",
            "2024-11-05T18:28:10+08:00",
            // 更多报告日期
        ];
          // 从后端获取健康报告日期列表
        async function fetchHealthReportDates() {
          var formData = new FormData();
          formData.append('id', localStorage.getItem('userid'));
          formData.append('username', localStorage.getItem('username'));
          formData.append('userpic', localStorage.getItem('userpic'));

          console.log(formData);

          // 发送到后端API
          try{
              // 访问的后端api
              var ipAdress = localStorage.getItem('ip');
              var apiUrl = ipAdress+'data/select';

              const response = await fetch(apiUrl, {
                  method: 'POST',
                  body: formData
              });
              
              if (response.ok) {
                  responseJson = await response.json();
                  healthReports = responseJson.health_reports;
                  // console.log(healthReports[0], healthReports[1]);
                  initReportList(healthReports);
              } else {
                  console.log('Error:', response.statusText);
              }
          } catch (error) {
              console.log('获取健康报告日期列表失败:', error);
              alert('获取健康报告日期列表失败，请稍后再试。');
          }
        }

        // 初始化健康报告日期列表
        function initReportList(healthReports) {
          var reportList = document.getElementById('reportList');
          reportList.innerHTML = ''; // 清空现有列表
          healthReports.forEach(function(reportDate) {
            var div = document.createElement('div');
            div.textContent = reportDate;
            div.addEventListener('click', function() {
              showHealthReport(reportDate);
            });
            reportList.appendChild(div);
          });
        }
        
        // 显示健康报告PDF
        async function showHealthReport(reportDate) {
            var healthReportContainer = document.getElementById('diseaseDetails');
            var pdfViewer = document.getElementById('pdfViewer');
            
            // 从后端获取健康报告PDF
            var formData = new FormData();
            formData.append('id', localStorage.getItem('userid'));
            formData.append('report_name', reportDate);
            
            // 发送到后端API
            try {
                // 访问的后端api
              var ipAdress = localStorage.getItem('ip');
              var apiUrl = ipAdress+'data/show';

              const response = await fetch(apiUrl, {
                method: 'POST',
                body: formData
              });
              
              if (response.ok) {
                  const pdfUrlJson = await response.json(); 
                  const pdfUrl = pdfUrlJson.pdf_url;
                  console.log("获取健康报告成功: ", pdfUrl);
                  // 直接将URL设置为iframe的src
                  pdfViewer.src = pdfUrl; // 设置 iframe 的 src 为 PDF URL
              } else {
                  console.log('Error:', response.statusText);
              }
            } catch (error) {
              console.log('获取健康报告失败:', error);
              alert('获取健康报告失败，请稍后再试。');
            }
          }
        
        // 页面加载完成后获取健康报告日期列表
        window.onload = function() {
          fetchHealthReportDates();
        };
        </script>


  </DIV><!--content--></DIV></DIV><!--footer S-->
  </BODY></HTML>
  